<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<!-- <view class="top-bg"></view> -->
		<dawnBar title="科室医生" class="dawnSearch"></dawnBar>

		<view class="tn-classify__container tn-bg-gray--light">
			<view class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around tn-bg-white">
				<!-- 左边容器 -->
				<scroll-view class="tn-classify__left-box" :scroll-top="leftScrollViewTop" scroll-y
					scroll-with-animation :style="{height: scrollViewHeight + 'px'}">
					<view v-for="(item, index) in deptList" :key="index" :id="`tabbar_item_${index}`"
						class="tn-classify__tabbar__item tn-flex tn-flex-col-center tn-flex-row-center "
						:class="[tabbarItemClass(index)]" @tap.stop="clickClassifyNav(index)">
						<view class="tn-classify__tabbar__item__title tn-padding-right-xs tn-padding-left-xs ">
							{{ item.name }}</view>
					</view>
				</scroll-view>
				<!-- 右边容器 -->
				<scroll-view class="tn-classify__right-box" scroll-y :scroll-top="rightScrollViewTop"
					:style="{height: scrollViewHeight + 'px'}">
					<block>
						<view class="tn-classify__content">
							<!-- 分类信息 -->
							<view class="tn-margin-top-sm">
								<view class="tn-flex tn-flex-row-center">
									<tn-loading mode="flower" :show="loading" :size="50" color="#3571BB"></tn-loading>
								</view>

								<view>
									<view class="" v-if="doctorList.length === 0">
										<tn-load-more class="tn-margin" status="nomore"
											:loadText="loadText"></tn-load-more>
									</view>

									<view class="product__item_horizontal" v-for="(item, index) in doctorList"
										:key="index" @click="navLink('/hosp/doctor/detail?itemId='+item.id)">
										<!-- <view class="item__image ">
											<tn-lazy-load :threshold="-50" height="100%" :image="item.headImageUrl"
												:index="item.id" imgMode="widthFix">
											</tn-lazy-load>
										</view> -->

										<view class="tn-flex tn-flex-col-center" v-if="item.headImageUrl">
											<image mode="widthFix" class="doctor-image" :src="item.headImageUrl">
										</view>

										<view class="item__data">
											<view>
												<view class="tn-flex tn-flex-col-center tn-flex-row-between">
													<text class="dawn-text-md tn-text-bold">{{item.name || '' }}</text>
													<!-- <tn-tag class="dawn-tag-sm dawn-tag-sm__1">{{item.gender || '' }}</tn-tag> -->

													<view v-if="item.jobTitle"
														class="justify-content-item tn-flex tn-flex-col-center">
														<!-- <text
															class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text> -->
														<tn-button height="20px" backgroundColor="tn-main-gradient-dawn"
															shape="shape" padding="0rpx 8rpx" shadow size="sm">
															<view class="tn-flex tn-flex-col-center">
																<!-- <text class="tn-icon-money-fill"></text> -->
																<text
																	class="tn-text-ellipsis">{{ item.jobTitle }}</text>
															</view>
														</tn-button>
													</view>
												</view>

												<view class="tn-padding-top-xs" v-if="item.address">
													<text
														class="tn-icon-map-fill dawn-text-sm tn-margin-right-ss"></text>
													<text class="dawn-text-sm">{{ item.address }}</text>
												</view>

												<view class="tn-padding-top-xs">
													<text
														class="tn-text-sm dawn-color-grey tn-text-ellipsis-2">{{ item.tags }}</text>
												</view>

												<view
													class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs">

													<view class="">
														<text v-if="item.workRange"
															class="tn-icon-time-fill dawn-text-sm tn-margin-right-ss"></text>
														<text class="dawn-text-sm">{{ item.workRange || '' }}</text>
													</view>

													<view class="tn-flex tn-color-gray">
														<!-- <view class="">
															<text class="tn-icon-like"></text>
															<text
																class="tn-padding-left-ss dawn-text-ss">{{ item.countLike }}</text>
														</view> -->
														<view class="tn-padding-left-xs">
															<text class="tn-icon-footprint"></text>
															<text
																class="tn-padding-left-ss dawn-text-ss">{{ item.views }}</text>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="tn-padding-bottom"></view>
					</block>
				</scroll-view>

			</view>
		</view>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import Routine from '@/libs/routine.js';
	import * as api from '@/api/api.js';
	import * as config from '@/api/config.js';
	import * as DoctorApi from '@/api/cms/doctor.js';
	import * as DepartmentApi from '@/api/cms/department.js';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import {
		mapGetters
	} from "vuex";
	import array from '../../tuniao-ui/libs/function/array';
	const app = getApp();
	export default {
		name: 'doctorList',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo']),
		data() {
			return {
				config_share: app.globalData.config_share, // 分享配置
				loading: false,
				loadText: {
					loadmore: '下拉加载',
					loading: '快速加载中...',
					nomore: '信息加快更新中'
				},
				queryData: {
					pageSize: 100,
					departmentId: 0,
				},
				banner: [],
				deptList: [],
				doctorList: [],
				dept: {},
				// 分类菜单item的信息
				tabbarItemInfo: [],
				// scrollView的top值
				scrollViewBasicTop: 0,
				// scrollView的高度
				scrollViewHeight: 0,
				// 左边scrollView的滚动高度
				leftScrollViewTop: 0,
				// 右边scrollView的滚动高度
				rightScrollViewTop: 0,
				// 当前选中的tabbar序号
				currentTabbarIndex: 0
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.getScrollViewInfo()
				// this.getTabbarItemRect()
			})
		},
		onLoad(options) {
			if (options.hasOwnProperty('itemId')) {
				this.queryData.departmentId = parseInt(options.itemId);
				// this.getdept();
			}
			this.getDeptList();
		},
		onShow() {
			console.log("index onShow");
		},
		methods: {
			getdoctorList() {
				let that = this;
				that.doctorList = [];
				this.loading = true;
				this.queryData.departmentId = this.dept.id;
				DoctorApi.getDoctorList(this.queryData).then(res => {
					if (res.code === 0) {
						that.loading = false;
						that.doctorList = res.data;
					}
				});
			},
			getDeptList() {
				let that = this;
				DepartmentApi.getDepartmentList().then(res => {
					console.table(res);
					if (res.code === 0) {
						that.deptList = res.data;
						that.currentTabbarIndex = 0;
						that.dept = that.deptList[0];
						this.getdoctorList();
					}
				});
			},
			// 点击了分类导航
			clickClassifyNav(index) {
				if (this.currentTabbarIndex === index) {
					return
				}
				this.currentTabbarIndex = index;
				this.dept = this.deptList[index];
				this.getdoctorList();
			},
			tabbarItemClass(index) {
				if (index === this.currentTabbarIndex) {
					return 'tn-classify__tabbar__item--active tn-bg-white'
				} else {
					let clazz = 'tn-bg-gray--light'
					if (this.currentTabbarIndex > 0 && index === this.currentTabbarIndex - 1) {
						clazz += ' tn-classify__tabbar__item--active--prev'
					}
					if (this.currentTabbarIndex < this.deptList.length && index === this.currentTabbarIndex + 1) {
						clazz += ' tn-classify__tabbar__item--active--next'
					}
					return clazz
				}
			},
			// 获取scrollView的高度信息
			getScrollViewInfo() {
				// 获取搜索栏的bottom信息，然后用整个屏幕的可用高度减去bottom的值即可获取scrollView的高度(防止双重滚动)
				this._tGetRect('.dawnSearch').then((rect) => {
					// 如果获取失败重新获取
					if (!rect) {
						setTimeout(() => {
							this.getScrollViewInfo()
						}, 10)
						return
					}
					// 获取当前屏幕的可用高度
					const systemInfo = uni.getSystemInfoSync()
					this.scrollViewBasicTop = systemInfo.statusBarHeight + rect.bottom + uni.upx2px(10)
					this.scrollViewHeight = systemInfo.safeArea.height + systemInfo.statusBarHeight - rect.bottom -
						uni.upx2px(10)
				})
			},
			/**
			 * 用户点击右上角分享
			 */
			// #ifdef MP
			onShareAppMessage: function() {
				return {
					title: this.appConfig.appTitle,
					imageUrl: this.appConfig.loginBg,
					desc: this.appConfig.companyRespVO.business,
					path: '/pages/index/index?shareUserId=' + this.uid
				};
			},
			// #endif
			navLink(url) {
				uni.navigateTo({
					url: url
				})
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
		}
	}
</script>


<style lang="scss" scoped>
	// 设置整个项目的背景色
	.page {
		// width: 100%;
		// height: 100%;
		// background-color: #f7f9ff;
		background-color: #FFFFFF !important;
		// background-image: url(static/images/bg.jpg);
		// background-size: 100% 100%;
		// background: linear-gradient(0deg, #f2f7fe, #2067be) !important;
		top: 0;
		left: 0;
		z-index: -2;
		min-height: 100vh;
		font-size: $dawn-font-size-sm;
	}

	.page-container {
		position: relative;
		// margin-top: -280px;
		// margin-top: - 400rpx;
		// padding: 20rpx 30rpx 40rpx 30rpx;
		padding: 0;
		// z-index: 2;
	}

	::v-deep .tn-collapse-item__head__title {
		font-size: $dawn-font-size-lg;
		color: $dawn-theme-color;
		font-weight: bolder;
	}

	::v-deep .tn-scroll-list {
		padding-bottom: 0px !important;
	}


	.tn-classify {

		/* 搜索栏 start */
		&__search {
			&--wrap {
				height: 126rpx;
			}

			&__box {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx;
				font-size: 26rpx;
			}

			&__icon {
				padding-right: 10rpx;
			}
		}

		/* 搜索栏 end */

		/* 分类列表和内容 strat */
		&__container {
			padding-top: 0rpx;
		}

		&__left-box {
			flex-basis: 30%;
		}

		&__right-box {
			background-color: #FFFFFF;
		}

		/* 分类列表和内容 end */

		/* 侧边导航 start */
		&__tabbar {
			&__item {
				height: 90rpx;

				&:first-child {
					border-top-right-radius: 0rpx;
				}

				&:last-child {
					border-bottom-right-radius: 0rpx;
				}

				&--active {
					background-color: #FFFFFF;
					position: relative;
					font-weight: bolder;
					color: $dawn-theme-color-dark;

					&::before {
						content: '';
						position: absolute;
						width: 15rpx;
						height: 50rpx;
						top: 50%;
						left: 0;
						background-color: $dawn-theme-color-dark;
						border-radius: 12rpx;
						transform: translateY(-50%) translateX(-50%);
					}

					&--prev {
						border-bottom-right-radius: 26rpx;
					}

					&--next {
						border-top-right-radius: 26rpx;
					}
				}
			}
		}

		/* 侧边导航 end */

		/* 分类内容 start */
		&__content {
			margin: 18rpx;

			/* 推荐商品 start */
			&__recomm {
				margin-bottom: 15rpx;

				&__swiper {}
			}

			/* 推荐商品 end */

			/* 子栏目 start */
			&__sub-classify {
				margin-bottom: 20rpx;

				&--title {
					font-weight: bold;
					margin-bottom: 18rpx;
				}

				&__content {

					&__item {
						width: 33%;
					}

					&__image {
						background-color: rgba(188, 188, 188, 0.1);
						border-radius: 12rpx;
						margin: 10rpx;
						margin-left: 0;
						width: 100%;
						height: 160rpx;
						overflow: hidden;
						border: 1rpx solid rgba(0, 0, 0, 0.02);

						image {
							width: 100%;
							height: 160rpx;
						}
					}

					&__title {
						margin-right: 10rpx;
					}
				}
			}

			/* 子栏目 end */
		}

		/* 分类内容 end */
	}





	.dawn-check-box {
		position: relative;
		margin-right: 10rpx;
		border-radius: $dawn-box-radius;
		text-align: center;
		white-space: nowrap;
		background-color: $dawn-bg-grey !important;
		padding: 7px 10px;
		white-space: normal;
		text-align: left;

		&__select {
			transition: transform .4s;
			font-size: $dawn-font-size-md + 2;
			// font-weight: bolder;
			background-color: $dawn-theme-color-light !important;

			&--icon {
				color: $dawn-theme-color !important;
				position: absolute;
				bottom: -4upx;
				right: -2upx;
				font-size: 40rpx;
				text-align: center;
				// line-height: 50upx;
			}

			&--reverse {
				transform: rotate(-180deg);
			}
		}
	}


	.nav-list {
		display: flex;
		flex-wrap: wrap;
		// padding: 0px 6px 0px;
		// justify-content: space-around;
		justify-content: space-between;
	}

	.nav-list .nav-list-item {
		padding: 15rpx;
		border-radius: 6px;
		width: 49%;
		// margin: 0 9px 20px;
		margin-bottom: 20rpx;
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 99;
	}

	/* 信息瀑布流 横向排列*/
	.product__item_horizontal {
		background-color: #FFFFFF;
		overflow: hidden;
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		padding: 15rpx;
		box-shadow: $dawn-box-shadow;
		border-radius: $dawn-border-radius;


		// margin: 0 10rpx;
		.item {

			/* 图片 start */
			&__image {
				width: 100%;
				height: auto;
				background-color: #FFFFFF;
				border: 1rpx solid #F8F7F8;
				border-radius: 10rpx;
				overflow: hidden;
			}

			&__image-text {
				position: absolute;
				border-radius: 10rpx;
				background: #4c4c4c;
				z-index: 100;
				margin-top: -20px;
				margin-left: 2px;
				padding: 0px 5px;
				font-size: $dawn-font-size-ss;
				opacity: 0.8;
				color: #FFFFFF;
			}

			/* 图片 end */

			/* 内容 start */
			&__data {
				// padding: 14rpx 0rpx;
				padding: 0rpx 10rpx;
			}

			/* 标题 start */
			&__title-container {
				color: #4c4c4c;
				// text-align: justify;
				// line-height: 38rpx;
				vertical-align: middle;
				font-size: $dawn-font-size-sm;
			}

			&__store-type {
				height: 28rpx;
				font-size: 20rpx;
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 4rpx;
				border-radius: 6rpx;
				white-space: nowrap;
				text-align: center;
				top: -2rpx;
				margin-right: 6rpx;
			}

			&__title {
				font-size: 30rpx;
			}

			/* 标题 end */

			/* 标签 start */
			&__tags-container {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-start;
			}

			&__tag {
				margin: 10rpx;
				color: #7C8191;
				background-color: #F3F2F7;
				padding: 4rpx 14rpx 6rpx;
				border-radius: 10rpx;
				font-size: 20rpx;

				&:first-child {
					margin-left: 0rpx !important;
				}
			}

			/* 标签 end */

			/* 价格 start */
			&__price-container {
				font-size: 24rpx;
				color: #E83A30;
				font-weight: bold;
			}

			&__price {
				&--unit {}

				&--integer {
					font-size: 38rpx;
				}

				&--decimal {}
			}

			/* 价格 end */
			/* 内容 end */
		}
	}


	.bg-rm {
		background-image: repeating-linear-gradient(360deg, #FFFFFF, #FAD8D6);
		color: #FF7043;
	}

	.bg-tj {
		background-image: repeating-linear-gradient(360deg, #FFFFFF, #D6F4FA);
		color: #3D7EFF;
	}

	::v-deep .tn-list-cell {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		color: #080808;
		font-size: $dawn-font-size-base;
		padding: 10rpx 15rpx !important;
	}
</style>